AIと駆け抜けた爆速開発！GeminiとGitHub Copilotでタイピングゲームを作ってみた体験談
こんにちは！今回は、私が初めてAIの力を借りてWebアプリケーション開発に挑戦した経験をブログ記事にまとめました。AIって本当にすごいの？開発ってどう変わるの？そんな疑問をお持ちの方に、少しでも参考になれば嬉しいです。
作成したもの
今回、AIと一緒に開発したのはこちらのタイピングゲームです。
シンプルなゲームですが、AIとの共同作業で、驚くほどスピーディーに形にすることができました。
開発の強力な助っ人たち：Gemini と GitHub Copilot
今回の開発でタッグを組んだAIツールは以下の2つです。
- 要件定義の相棒：Gemini
- 開発したいもののイメージを伝え、対話しながら具体的な要件に落とし込んでいく役割を担ってもらいました。
- 開発の実行部隊：GitHub Copilot (エージェントモード)
- Geminiと整理した要件を元に、実際のコード作成や環境構築を行ってもらいました。
開発プロセス：AIとの二人三脚
Step 1：Gemini との対話で進めた要件定義
まず取り掛かったのは、作りたいタイピングゲームの要件定義です。Geminiに「こんなタイピングゲームを作りたいんだけど…」と、ふんわりとしたイメージを伝えると、そこから会話形式でどんどん深掘りしてくれました。
「ランキング機能はあった方が面白いんじゃない？」 「入力ミスした時はどうする？」
など、Gemini側から積極的に提案をしてくれたのが印象的でした。特に便利だったのが Canvas機能 です。Geminiとの会話の流れや決定事項がCanvas上に整理されていくので、思考がまとまりやすく、そのまま要件定義書として活用できました。これは本当に画期的！
最終的に、Geminiと作り上げた要件定義書をマークダウン形式で出力し、いよいよ開発フェーズへと進みます。
実はこの記事も内容を伝えて整理を手伝ってもらっています。
Step 2：GitHub Copilot による実装
ここからは、GitHub Copilotの出番です。まずは、作成するアプリケーションのベースとなる環境構築を指示。すると、あっという間に開発環境の雛形が出来上がりました。
※当初はDockerで動くReact + nextの環境を作成してもらっていました。
次に、Geminiと作成したマークダウン形式の要件定義書をGitHub Copilotに読み込ませ、「この内容でアプリの骨子を作って！」とお願い。すると、驚くべきことに、基本的な機能が実装されたアプリケーションのプロトタイプが短時間で完成しました。
その後は、実際に動かしながら「ここの表示をこうしたい」「この機能が足りない」といった細かい部分を、GitHub Copilotと対話しながら追加・修正していくという流れで進めました。
AI開発のリアルな壁：苦労したこと
AIとの開発は素晴らしい体験でしたが、もちろん一筋縄ではいかない部分もありました。
1. 画面作成時のニュアンス伝達の難しさ
「このボタン、もうちょっと右上に…」「全体の雰囲気をもう少し柔らかい感じで…」といった画面デザインのニュアンスを文字ベースで伝えるのは、想像以上に大変でした。AIは指示を忠実に実行しようとしますが、人間が持つ「なんとなくのイメージ」を汲み取るのはまだ難しいようです。何度も指示を出し直し、イメージ通りの画面になるまで試行錯誤が必要でした。
2. 根気強いエラー解消と「人間の一工夫」
開発中に発生するエラーの解消も、AIは手伝ってくれます。しかし、時にはなかなか解決に至らないことも。よくよく観察してみると、AIが同じような修正パターンを繰り返してしまっているケースがありました。
そんな時は、人間側から「このファイルのこの部分が怪しいんじゃない？」「こういうアプローチで試してみてくれる？」といった形で、異なる視点やヒントを与えることで、スムーズに解決することができました。AIも万能ではなく、時には人間の「気づき」が突破口になることを実感しました。
3. 全体像の把握とコンポーネント設計の重要性
AIがコードを生成してくれるため、開発スピードは格段に上がります。しかし、その反面、「作ってもらった」という感覚が強くなり、アプリケーション全体の構造やコードの流れを把握するのが難しくなる側面も。
また、初期の段階でコンポーネント化（部品化）の指示を明確にしていなかったため、コードがファットコードになってしまいました。後からリファクタリングする手間を考えると、初期段階での設計がいかに重要かを痛感しました。
AI開発で得た大きな学び
今回の挑戦を通して、AIと共同で開発を進める上での重要なポイントが見えてきました。
1. 「タスクベースの指示」が鍵
GitHubも提唱していますが、AIに指示を出す際は、なるべく具体的なタスクレベルまで落とし込んで伝えることが重要です。「タイピングゲームを作って」という曖昧な指示よりも、「ヘッダーコンポーネントを作成し、その中にタイトルとナビゲーションを配置して」といった具体的な指示の方が、AIは的確に動作してくれます。
2. AIの思考パターンと人間の知識の相乗効果
AIは得意な処理パターンや思考のクセがあるように感じました。そのため、開発者自身もある程度の知識を持ち、AIの提案を鵜呑みにするのではなく、時には軌道修正したり、別の角度からのアプローチを指示したりすることが、より良い成果物を生み出す上で不可欠だと感じました。
3. 圧倒的な開発スピード
苦労した点も挙げましたが、それを補って余りあるのが、AIによる開発スピードの向上です。今回のような小規模なアプリケーションであれば、追加機能や修正も含めて、5～6時間程度 で形にすることができました。これは、人間が一人で開発する場合と比べて、数倍の速さと言えるでしょう。
4. 「コンポーネント設計」を意識した指示の大切さ
前述の「苦労したこと」でも触れましたが、コードの保守性や可読性を高めるためには、開発の初期段階からコンポーネント設計を意識し、AIにもその意図を明確に伝えることが重要です。「この機能は独立したコンポーネントとして作成して」といった指示を出すことで、より整理された美しいコードベースを維持できるはずです。
おわりに：AI開発の可能性と、これから挑戦する人へのエール
今回、GeminiとGitHub Copilotという強力なAIツールと共に開発を行った経験は、私にとって非常に刺激的で、多くの学びがあるものでした。AIは決して魔法の杖ではありませんが、開発者の強力なパートナーとなり得ることは間違いありません。
AIの進化は日進月歩です。これからAIを活用した開発に挑戦しようと考えている方は、ぜひ臆することなく、まずは小さなプロジェクトからでも一歩を踏み出してみてください。きっと、新しい開発体験と、想像以上の成果が待っているはずです。
この記事が、皆さんのAI開発への挑戦のきっかけとなれば幸いです。
